<template>
  <el-drawer
    title="设置权限"
    size="40%"
    v-if=""
    :visible.sync="drawer1"
    :append-to-body='true'
     >
    <el-row  class="assign">
      <el-col :span="12">
        <div class="assignHead">菜单</div>
        <el-tree  :data="menuTree" :props="defaultProps" @node-click="" @node-expand="handleExpand" @node-collapse="handleCollapse"
                  node-key="menuId"
                  ref="menuName"
        >
        </el-tree>
      </el-col>
      <el-col :span="6">
        <div class="assignHead" style="padding-left: 20px"> <el-checkbox v-model="thisLevelAll" @change="checkbox1" :disabled="disabled">本级权限</el-checkbox></div>
        <el-tree   ref="thisLevel" :data="menuTree"  show-checkbox :props="defaultProps"@node-expand="handleExpand"@node-collapse="handleCollapse" @check-change="thisLevelChange"
                   node-key="menuId"
                   :default-checked-keys="thisLevelKeys"
        >
          <span slot-scope="{ node, data }" ></span>
        </el-tree>
      </el-col>
      <el-col :span="6">
        <div class="assignHead"  style="padding-left: 20px"><el-checkbox v-model="lowerLevelAll" @change="checkbox2" :disabled="disabled">下级权限</el-checkbox></div>
        <el-tree  ref="lowerLevel" :data="menuTree" show-checkbox :props="defaultProps"@node-expand="handleExpand"@node-collapse="handleCollapse" @check-change="lowerLevelChange"
                  node-key="menuId"
                  :default-checked-keys="lowerLevelKeys"
        >
          <span slot-scope="{ node, data }" ></span>
        </el-tree>
      </el-col>
    </el-row>
    <div style="width:200px;margin:  auto" v-if="!disabled">
      <el-button size="small" style="float:left"  @click="">取消</el-button>
      <el-button size="small" type="primary" style="float:right" @click="savePermission">保存</el-button>
    </div>
  </el-drawer>

</template>

<script>
  export default {
    data() {
      return {
        drawer1: false,
        menuTree:[],
        thisLevelAll:false,
        lowerLevelAll:false,
        disabled:false,//禁用勾选
        thisLevelKeys:[],
        lowerLevelKeys:[],
        queryMenuData:{
          departmentRoleId:''
        },
        allKeys:[],
        defaultProps:{
          children: 'children',
          label: 'menuName'
        }
      };
    },
    methods:{
      savePermission(){
        let current= this.$refs.thisLevel.getCheckedKeys().concat(this.$refs.thisLevel.getHalfCheckedKeys())
        let next=this.$refs.lowerLevel.getCheckedKeys().concat(this.$refs.lowerLevel.getHalfCheckedKeys())
        let param={departmentRoleId:this.queryMenuData.departmentRoleId,current:current,next:next}
        this.$api.permission.savePermission(param).then(resp => {
          this.$message.success("保存成功")
          this.getMenuTree()
        })
      },
      //菜单接口
      getMenuTree(){
        this.$api.permission.menuTreeByRoleId(this.queryMenuData).then(resp => {
          this.menuTree = resp;
          this.findAllChildren(resp)
          this.thisLevelAll=this.thisLevelKeys.length!=0
          this.lowerLevelAll=this.lowerLevelKeys.length!=0
        })
      },
      handleExpand(data,node){
        let menuId=data.menuId;
        this.$refs.thisLevel.store.nodesMap[menuId].expanded = true;
        this.$refs.menuName.store.nodesMap[menuId].expanded = true;
        this.$refs.lowerLevel.store.nodesMap[menuId].expanded = true;
      },
      handleCollapse(data,node){
        let menuId=data.menuId;
        this.$refs.thisLevel.store.nodesMap[menuId].expanded = false;
        this.$refs.menuName.store.nodesMap[menuId].expanded = false;
        this.$refs.lowerLevel.store.nodesMap[menuId].expanded = false;
      },
      thisLevelChange(data ){
        this.thisLevelKeys= this.$refs.thisLevel.getCheckedKeys();
        this.thisLevelAll=this.thisLevelKeys.length!=0
      },
      lowerLevelChange(data ){
        this.lowerLevelKeys =this.$refs.lowerLevel.getCheckedKeys();
        this.lowerLevelAll=this.lowerLevelKeys.length!=0
      },
      // 遍历找出所有要勾选子节点
      findAllChildren(data) {
        data.forEach((item, index) => {
          this.$set(item, 'disabled', this.disabled);//禁用勾选
          if(item.children) {
            this.findAllChildren(item.children);
          }else {
            if(item.currentLevel=='1'){
              this.thisLevelKeys.push(item.menuId)
            }
            if(item.nextLevel=='1'){
              this.lowerLevelKeys.push(item.menuId)
            }
            this.allKeys.push(item.menuId)
          }
        })
      },
      checkbox1(a){
        if(a){
          this.$refs.thisLevel.setCheckedKeys(this.allKeys);
        }else {
          this.$refs.thisLevel.setCheckedKeys([]);
        }
      },
      checkbox2(a){
        if(a){
          this.$refs.lowerLevel.setCheckedKeys(this.allKeys);
        }else {
          this.$refs.lowerLevel.setCheckedKeys([]);
        }
      },

    },
    mounted() { // 渲染后执行
      // 查询数据
      this.$bus.$on('openAssign',(data)=>{
         this.thisLevelKeys=[];
         this.lowerLevelKeys=[];
        this.disabled=data.roleType=='系统管理员'
        this.queryMenuData.departmentRoleId=data.departmentRoleId
        this.getMenuTree()
        this.drawer1=true;
      })
    },
    beforeDestroy() {
      this.$bus.$off('openAssign')
    },
  };
</script>

<style >
  .example {}
  .assign{
    height: 85%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .assignHead{
    height: 20px;
    background-color: #CBCBCB;
    padding: 10px;
  }
</style>
